<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>泳池详情页</title>
    <!-- 引入element-ui样式 -->
    <link rel="stylesheet" href="../../plugins/element-ui/index.css">
    <style>
        *{
            margin: 0;
            padding: 0;
        }
    </style>
    <!--轮播走马灯-->
    <style>
        .el-carousel__item h3 {
            color: #475669;
            font-size: 18px;
            opacity: 0.75;
            line-height: 300px;
            margin: 0;
        }

        .el-carousel__item:nth-child(2n) {
            background-color: #99a9bf;
        }

        .el-carousel__item:nth-child(2n+1) {
            background-color: #d3dce6;
        }
        .el-carousel__container{
            height: 500px;
        }
    </style>

</head>
<body>
<div id="app">

    <!--1.导航栏-->
    <div style="z-index: 999;position:fixed;width: 100%">
        <el-menu
                class="el-menu-demo"
                mode="horizontal"
                background-color="#545c64"
                text-color="#fff"
                active-text-color="#ffd04b">
            <el-menu-item index="1" @click="url(1)" style="margin-left: 200px">首页</el-menu-item>
            <el-menu-item index="2" @click="url(2)">个人订单信息</el-menu-item>
            <el-menu-item index="3" @click="url(3)">个人信息</el-menu-item>

            <el-submenu index="4"  style="margin-left: 400px">
                <template slot="title"><i class="el-icon-user"></i></template>
                <el-menu-item index="6-2" @click="url(6)">退出登录</el-menu-item>
            </el-submenu>


        </el-menu>
    </div>

        <!-- 1.图片-->
        <div>
            <img style="width: auto; height: 2px; border:none;cursor: pointer;"
                 :preview-src-list=" `/files/downloadFile?name=${this.natatoriumDate.image}` "
                 :src="getImage(this.natatoriumDate.image)"
            />
            <img style=" width: 300px;height: 300px;margin: 80px 0 0 300px" :src="imageUrl1" class="image">

        </div>

        <!-- 2.基本信息-->
        <div style="margin: -305px 0 0 650px;background-color: whitesmoke;border:1px black solid;width: 600px;height: 300px;">
            <div style="margin: 10px 0 0 20px">
                <h2>泳池名称：{{this.natatoriumDate.name}}</h2>
                <h3>单人票： {{this.natatoriumDate.price1}}</h3>
                <h3>团购票： {{this.natatoriumDate.price2}}</h3>
                <h3>类型： {{this.natatoriumDate.type}}</h3>
                <h3>开放时间：  {{this.natatoriumDate.openTime}}</h3>
                <h3>地点：  {{this.natatoriumDate.address}}</h3>
            </div>
        </div>

        <!--图片组-->
        <div style="margin: 0 0 0 300px">
            <ul class="el-upload-list el-upload-list--picture-card">
                <li class="el-upload-list__item is-success" v-for="fit in fileList" :key="fit.name">
                    <img style="width: 100%; height: 100%" :src="fit.url" @click="handlePictureCardPreview(fit)"/>
                </li>
            </ul>

            <el-dialog :visible.sync="dialogVisible">
                <img width="100%" :src="dialogImageUrl" alt="">
            </el-dialog>
        </div>

        <div style="margin:20px 0 0 300px;width: 950px;height: 300px;background-color: whitesmoke;border:1px black solid;">
            <h3>警示：  {{this.natatoriumDate.warning}}</h3>
            <h3>详情：  {{this.natatoriumDate.details}}</h3>
        </div>

        <div style="margin: 30px 0 100px 700px">
            <el-button style="width: 100px;height: 50px" type="primary" round @click="application_dialogShow">选择购票</el-button>
        </div>

    <!--申请弹框-->
    <el-dialog title="购票信息" style="height: 650px"  :visible.sync="dialog_add">
        <el-form :model="formData_add" :rules="rules" ref="formData_add" label-width="100px" class="demo-formData_add">

            <el-form-item  label="票型：" prop="type">
                <template>
                    <el-radio v-model="formData_add.type" label="单人票">单人票</el-radio>
                    <el-radio v-model="formData_add.type" label="多人票">多人票</el-radio>
                </template>

            </el-form-item>


            <el-form-item  v-if="formData_add.type=='单人票'" label="人数：" prop="number">
                <template>
                    <el-input-number v-model="formData_add.number" @change="handleChange" :min="1" :max="15" label="人数"></el-input-number>
                </template>
            </el-form-item>
            <el-form-item  v-else-if="formData_add.type=='多人票'" label="人数：" prop="number">
                <template>
                    <el-input-number v-model="formData_add.number" @change="handleChange" :min="3" :max="15" label="人数"></el-input-number>
                </template>
            </el-form-item>


            <el-form-item  label="联系电话：" prop="phone">
                <el-input v-model="formData_add.phone"></el-input>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="submit">购票</el-button>
                <el-button @click="center">取消</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>





    </div>

</div>


<script src="../../plugins/vue/vue.js"></script>

<!-- 引入element-ui组件库 -->
<script src="../../plugins/element-ui/index.js"></script>

<!-- 引入axios -->
<script src="../../plugins/axios/axios.min.js"></script>

<script>
    new Vue({
        el:'#app',    //element
        data:{
            userInfo:{},

            //泳池信息
            natatoriumDate:{},

            natatoriumId:'',

            items:{},

            //申请弹框内容
            formData_add:{},
            dialog_add:false,

            options: ['单人票','多人票'],

            //图片组

            fileList: [],
            dialogImageUrl: '',
            dialogVisible: false,

        },
        created() {
            const userInfo = window.localStorage.getItem('user')
            console.log("userInfo1:::"+userInfo)
            if (userInfo) {
                this.userInfo = JSON.parse(userInfo)
            }
            console.log("userInfo2:::"+userInfo)

            //获取url传过来的泳池id
            var temData = new URLSearchParams(window.location.search);
            this.natatoriumId=temData.get('id')
            console.log(temData.get('id'))

            this.getAll()

        },
        methods:{
            url(code){
                if (code==1){
                    window.location.href='index.html';
                }else  if (code==2){
                    window.location.href='ordersMyself.html';
                }else  if (code==3){
                    window.location.href='updateMyself.html';
                }else  if (code==4){
                    window.location.href='../login/UserLogin.html';
                }
            },

            getAll(){
                //初始化
                this.fileList=[]
                //1.获取泳池信息
                axios.get("/natatoriums/getById/"+this.natatoriumId).then((res)=>{
                    console.log("res1:")
                    this.natatoriumDate=res.data.data
                    console.log(this.natatoriumDate)

                    //对图片组的fileList初始化
                    if (this.natatoriumDate.images!=null){
                        //2.对图片组进行字符串切割
                        var images = this.natatoriumDate.images.split(',')
                        //注：因为切割的字符串是’xxx,xxx,xxx,‘=>按逗号切割会将最后一个逗号切割成一个空字符串，所以for循环不用循环到最后一个元素
                        for (var i = 0; i < images.length-1; i++) {
                            this.fileList.push({name:images[i],url:'http://localhost:8080/files/downloadFile?name='+images[i]})
                        }
                        console.log(this.fileList)
                    }
                })
            },

            //申请弹框的显示和隐藏
            application_dialogShow(){

                if (this.userInfo==null){
                    this.$message.error("请先登录账号在进行申请!")
                }else {
                    //初始化formData_add
                    this.formData_add = {}

                    this.dialog_add = true

                    console.log("jobtime:")
                }
            },

            center() {
                this.dialog_update=false
                this.dialog_add=false
                this.$message.info("取消操作")
                this.getAll()

            },


            //提交申请
            submit(){
                //封装数据
                this.formData_add.name=this.natatoriumDate.name
                this.formData_add.natatoriumId= this.natatoriumId
                this.formData_add.username= this.userInfo.data.username

                if (this.formData_add.type=='单人票'){
                    this.formData_add.price=this.natatoriumDate.price1
                    this.formData_add.total=this.formData_add.price * this.formData_add.number
                }else  if (this.formData_add.type=='多人票'){
                    this.formData_add.price=this.natatoriumDate.price2
                    this.formData_add.total=this.formData_add.price * this.formData_add.number
                }
                console.log("formData_add::")
                console.log(this.formData_add)

                this.$confirm("请确认信息填写无误！","提醒",{type: 'info'
                }).then(()=>{
                   axios.post("/orderss/addOrder",this.formData_add).then((res)=>{
                       if (res.data.code){
                           this.$message.success(res.data.msg)
                       }else{
                           this.$message.error(res.data.msg)

                       }
                   }).finally(()=>{
                       this.dialog_add=false
                   })
                })

            },

            //图片组图片放大
            handlePictureCardPreview(file) {
                this.dialogImageUrl = file.url;
                this.dialogVisible = true;
            },
            getImage(image) {
                this.imageUrl1= `/files/downloadFile?name=${image}`
            },
        }
    })
</script>
</body>
</html>
